<template>
  <!-- <el-select
    v-model="spu_id"
    clearable
    placeholder="SKU"
    class="py-[8px]"
    @change="handleChange"
    @click.native
    :teleported="false"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select> -->

  <vxe-grid ref="tableRef" v-bind="tableOptions" :span-method="mergeRowMethod" />
</template>
<script lang="jsx" setup>
import { getCostPrice } from "../api.js";
import SelectWarehouse from "@/components/SelectWarehouse";

const props = defineProps({
  formData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { formData } = toRefs(props);

const spu_id = ref(null);
const options = ref([]);

const sumNum = (list, field) => {
  let count = 0;
  list.forEach((item) => {
    count += Number(item[field]);
  });
  return count.toFixed(2);
};

onMounted(() => {
  getCostPriceList();
});

const getCostPriceList = () => {
  tableOptions.data = [];
  options.value = [];
  tableOptions.loading = true;
  getCostPrice({
    spu_id: formData.value.spu_id,
    sku: formData.value.sku,
  })
    .then((res) => {
      options.value = res?.data?.map((item) => {
        return {
          label: item.sku,
          value: item.sku,
          list: item?.data || [],
        };
      });
      const findIndex = res?.data?.findIndex((item) => item.sku === formData.value.sku);
      const index = findIndex == -1 ? 0 : findIndex;
      spu_id.value = options.value[index]?.value;
      let data = res?.data[index]?.data || [];
      const sortedData = data?.sort((a, b) => {
        if (a.wms_attribute_cn < b.wms_attribute_cn) return -1;
        if (a.wms_attribute_cn > b.wms_attribute_cn) return 1;
        return 0;
      });
      tableOptions.data = sortedData;
    })
    .finally(() => {
      tableOptions.loading = false;
    });
};

const tableOptions = reactive({
  round: true,
  height: 572,
  border: true,
  autoHidden: true,
  loading: false,
  showFooter: true,
  columnConfig: {
    resizable: true,
  },
  data: [],
  columns: [
    { title: "仓库属性", field: "wms_attribute_cn" },
    { title: "仓库名称", field: "warehouse_name" },
    { title: "在途库存", field: "transit_num" },
    { title: "可用库存", field: "num" },
    { title: "锁定库存", field: "lock_num" },
    { title: "库存合计", field: "total_num" },
    { title: "仓库加权成本", field: "weighted_cost" },
    // { title: "成本合计", field: "weighted_cost" },
  ],
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return "合计";
        }
        if (
          [
            "transit_num",
            "transit_num",
            "num",
            "lock_num",
            "total_num",
            "weighted_cost",
          ].includes(column.field)
        ) {
          return sumNum(data, column.field);
        }
        return "";
      }),
    ];
  },
});

const mergeRowMethod = ({ row, _rowIndex, column, visibleData }) => {
  const fields = ["wms_attribute_cn"];
  const cellValue = row[column.field];
  if (cellValue && fields.includes(column.field)) {
    const prevRow = visibleData[_rowIndex - 1];
    let nextRow = visibleData[_rowIndex + 1];
    if (prevRow && prevRow[column.field] === cellValue) {
      return { rowspan: 0, colspan: 0 };
    } else {
      let countRowspan = 1;
      while (nextRow && nextRow[column.field] === cellValue) {
        nextRow = visibleData[++countRowspan + _rowIndex];
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 };
      }
    }
  }
};

const handleChange = (val) => {
  const list = options.value.find((item) => item.value === val)?.list || [];
  const sortedData = list?.sort((a, b) => {
    if (a.wms_attribute_cn < b.wms_attribute_cn) return -1;
    if (a.wms_attribute_cn > b.wms_attribute_cn) return 1;
    return 0;
  });
  tableOptions.data = sortedData;
  tableOptions.data = list;
};
</script>
